<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瑞成火锅</title>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/contact.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
</head>
<style>
  .h_div_img,
  .h_div_img1,
  .h_div_img2,
  .h_div_img3 {
    display: none;
  }

  #marquee-box {
    width: 100%;
    overflow: hidden;
    height: 400px
  }

  #marquee-con {
    width: 500%;
    float: left;
  }

  #marquee,
  #marquee-1 {
    float: left;
  }

  .marquee-img {
    float: left;
    height: 460px;
    width: 400Px;
  }
</style>

<body>
  <div class="div_header">
    <div style="width: 100%;height: 100%;">
      <header>
        <div style="display: flex; padding-top: 2%; padding-left: 3%;">
          <div style="flex: 1;">
            <div style="display: flex; padding-left: 5%;">
              <img src="../img/logo3.png" width="150px" alt="">
              <!-- <h3 style="color: #fff;">瑞成火锅</h3> -->
            </div>
          </div>
          <div class="div_header_div_ul">
            <div style="width: 80%;margin-top: 1.5%;">
              <ul style="display: flex;">
                <li><a href="./home.html">首页</a></li>
                <li><a href="./Century-old_brand.html">百年品牌</a></li>
                <li><a href="./Brand_strength.html">品牌实力</a></li>
                <li><a href="./cooperation.html">特许合作</a></li>
                <li><a href="./Legendary_dishes.html">传奇菜品</a></li>
                <li><a href="./Store_navigation.html">门店导航</a></li>
                <li><a href="./contact.html">联系我们</a></li>
                <li><a href="./message.html">留言</a></li>
                <li id="li_1"><a href="./login.html">登录/注册</a></li>
                <li id="li_2"><a href="./userInfo.html">个人中心</a></li>
              </ul>
            </div>
            <div style="margin-top: 1.5%;">
              <input type="text" style=" border: 1 solid #181890; height: 30px; width: 150px;border-radius: 0;"
                id="name">
              <button style="border: 0;padding: 3px 5px;background-color: #fff;" onclick="search()">搜索</button>
            </div>
          </div>
        </div>
      </header>
      <!-- 大图片 -->
      <section class="home_header_sec">
        <div class="container">
          <div class="home_div_img" style="padding-left: 15%;padding-top: 5%;">
            <img src="../img/Snipaste_2024-06-30_19-21-36-removebg-preview.png" width="200px" alt="">
          </div>
        </div>
      </section>
    </div>
    <!-- 百年品牌 -->
    <section class="home_one_sec" style="background:url('../img/v2.jpg');padding-top: 5%;height: 870px;">
      <div class="container">
        <img src="../img/title1.png" alt="">
        <div class="row" style="color: #fff;margin-top: 5%;">
          <div class="col-lg-3">
            <div class="home_div_h3_p">
              <h3 style="text-align: center;">消费</h3>
              <div style="margin: auto; padding-left: 29%;margin-top: 5%;">
                <p
                  style="display: block; writing-mode: vertical-rl; width: 100px; height: 270px; float: left;letter-spacing: 5px;">
                  大众消费，
                  <br>人均消费60—90高性价比，<br>
                  口碑爆棚。
                </p>
              </div>
            </div>
            <div class="h_div_img">
              <img width="100%" src="../img/hg.png" alt="">
            </div>
          </div>
          <div class="col-lg-3">
            <div class="home_div_h3_p1">
              <h3 style="text-align: center;">服务</h3>
              <div style="margin: auto; padding-left: 29%;margin-top: 5%;">
                <p
                  style="display: block; writing-mode: vertical-rl; width: 100px; height: 270px; float: left;letter-spacing: 5px;">
                  场景化服务管理，将世家文化<br>
                  表达的雅而不俗。
                </p>
              </div>
            </div>
            <div class="h_div_img1">
              <img width="100%" src="../img/hg.png" alt="">
            </div>
          </div>
          <div class="col-lg-3">
            <div class="home_div_h3_p2">
              <h3 style="text-align: center;">菜品</h3>
              <div style="margin: auto; padding-left: 29%;margin-top: 5%;">
                <p
                  style="display: block; writing-mode: vertical-rl; width: 100px; height: 270px; float: left;letter-spacing: 5px;">
                  原生态健康食材，<br>
                  私房菜的品质摆盘，精心挑选上好材料。
                </p>
              </div>
            </div>
            <div class="h_div_img2">
              <img width="100%" src="../img/hg.png" alt="">
            </div>
          </div>
          <div class="col-lg-3">
            <div class="home_div_h3_p3">
              <h3 style="text-align: center;">环境</h3>
              <div style="margin: auto; padding-left: 29%;margin-top: 5%;">
                <p
                  style="display: block; writing-mode: vertical-rl; width: 100px; height: 270px; float: left;letter-spacing: 5px;">
                  传承宅门世家文化，如影如梦<br>
                  如穿越时代一般的传统风情。
                </p>
              </div>
            </div>
            <div class="h_div_img3">
              <img width="100%" src="../img/hg.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 传奇菜品 -->
    <section class="home_two_sec" style="background-color:#18198f;padding: 5%;">
      <div class="container">
        <div style="text-align: center;margin-bottom: 5%;">
          <img src="../img/title7.png" alt="">
        </div>
        <div style="display: flex; height: 500px;overflow: hidden;">
          <div class="home_two_sec_div1" style="width: 23%;margin: auto;">
            <img src="../img/bj.jpg" width="100%" height="100%" alt="">
          </div>
          <div class="home_two_sec_div2" style="width: 23%;margin: auto;">
            <img src="../img/ms1.jpg" width="100%" height="100%" alt="">
          </div>
          <div class="home_two_sec_div3" style="width: 23%;margin: auto;">
            <img src="../img/ms2.jpg" width="100%" height="100%" alt="">
          </div>
          <div class="home_two_sec_div4" style="width: 23%;margin: auto;">
            <img src="../img/麻辣锅底.jpg" width="100%" height="100%" alt="">
          </div>
        </div>
      </div>
    </section>
    <!-- 品牌优势 -->
    <section class="home_three_sec"
      style="background:url('../img/瑞成捕获.JPG') ; padding: 5% 0;position: relative;z-index: -20;">
      <div
        style="background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: absolute;top: 0;left: 0;z-index: -1;">
      </div>
      <div class="container">
        <img src="../img/title2.png" alt="">
        <div class="row" style="margin-top: 5%;color: #fff;">
          <div class="col-lg-3 home_three_sec_div1">
            <img src="../img/icons(1).png" alt="">
            <div>
              <h4 style="margin-bottom: 5%;">400家选址经验</h4>
              <p style="font-size: 14px;">成都直营店打版店选址<br>
                400+家火锅店选址经验<br>
                标准的选址咨询服务<br>
                门店环境统一<br>
                协力打造“世家文化”</p>
            </div>
          </div>
          <div class="col-lg-3 home_three_sec_div2">
            <img src="../img/icons(2).png" alt="">
            <div>
              <h4 style="margin-bottom: 5%;">核心优势</h4>
              <p style="font-size: 14px;">一条龙服务的技术优势和品牌支持，从店面装修厨房布局到组织架构建设，
                规章制度 操作流程轩窗广告销售技术等均由公司指导实施。</p>
            </div>
          </div>
          <div class="col-lg-3 home_three_sec_div3">
            <img src="../img/icons(3).png" alt="">
            <div>
              <h4 style="margin-bottom: 5%;">成熟门店标准</h4>
              <p style="font-size: 14px;">全套管理运营标准，公司负责安排外派前厅、后厨等；培训经理现场进行全员指导培训，
                具备互联网整合营销思维的超前老火锅品牌，不断定制营销活动方案，从多角度入口持续爆点门店。</p>
            </div>
          </div>
          <div class="col-lg-3 home_three_sec_div4">
            <img src="../img/icons(4).png" alt="">
            <div>
              <h4 style="margin-bottom: 5%;">标准化运营模式</h4>
              <p style="font-size: 14px;">公司为合作伙伴提供全套公司运营体系指南，从《公司简介》到《员工守则》
                《运营手册》《操作手册》《培训手册》店面装及视觉识别系统（VIS）标准等宣传、培训、运营资料。</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 新闻中心 -->
    <section class="home_five_sec">
      <div style="display: flex;">
        <div style="width: 70%; background-color: #140278;padding: 5% 0;position: relative;color: #fff;display: flex;">
          <div class="home_five_sec_div">
            <img src="../img/nbg.jpg" alt="">
          </div>
          <div class="home_five_sec_div1" style="text-align: right;margin-right: 5%;">
            <div>
              <img src="../img/title4.png" alt=""><br>
              <p style="color: #d59961;">钻研火锅的艺术 缔造独特的味觉体验</p>
              <p></p>
              <p>传承多年，以正宗重庆传统码头火锅为蓝本，辅以袁老四独特手法，加以变化多端的火候烹调而成。传统中见创新，
                红锅麻辣酣畅，白锅浓厚醇香，复原重庆正宗的老火锅，只呈现独特的“袁老四”味道</p>
            </div>
            <div style="display: flex;">
              <div style="background-color: #fff;color: #000; width: 45%;text-align: left;margin: auto;">
                <img src="../img/批注 2024-06-25 094147.jpg" width="100%" height="260px" alt="">
                <p></p>
                <p style="margin-left: 5%;">这个是瑞成火锅的门店</p>
              </div>
              <div style="background-color: #fff;color: #000; width: 45%;text-align: left;margin: auto;">
                <img src="../img/批注 2024-06-25 095408.jpg" width="100%" height="260px" alt="">
                <p></p>
                <p style="margin-left: 5%;">这个是我们火锅店里面的布置</p>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 30%;background-color: #181890;color: #fff;padding-left: 2%;padding-top: 5%;">
          <div class="home_five_sec_div2">
            <h3 style="font-weight: 700;">06-16</h3>
            <h5>瑞成火锅北京总店盛大开业</h5>
            <p>2023年6月16日，热烈祝贺瑞成火锅北京总店盛大开业。</p>
          </div>
          <div class="home_five_sec_div3" style="margin-top: 5%;">
            <h3 style="font-weight: 700;">06-13</h3>
            <h5>瑞成火锅商丘信华天街总店盛大开业</h5>
            <p>2023年6月13日，热烈祝贺瑞成火锅商丘信华天街总店盛大开业。</p>
          </div>
          <input class="div_div_form_btn" type="submit" value="了解更多">
        </div>
      </div>
    </section>
    <!-- 轮播 -->
    <section style="height: 400px;width: 100%;">
      <div id="marquee-box">
        <div id="marquee-con">
          <div id="marquee-1"></div>
          <div id="marquee" class="d-flex justify-content-between">
            <img class="tea_div_img tea_div_img1 marquee-img" src="../img/xc7.jpg" width="23%" alt="">
            <img class="tea_div_img tea_div_img2 marquee-img" src="../img/xc8.jpg" width="23%" alt="">
            <img class="tea_div_img tea_div_img3 marquee-img" src="../img/xc9.jpg" width="23%" alt="">
            <img class="tea_div_img tea_div_img4 marquee-img" src="../img/xc10.jpg" width="23%" alt="">
            <img class="tea_div_img tea_div_img4 marquee-img" src="../img/xc11.jpg" width="23%" alt="">
          </div>
        </div>
      </div>
    </section>
    <!-- 页尾 -->
    <footer style="background-color: #000; padding: 3% 15%;">
      <div class="container">
        <div style="display: flex;">
          <div style="display: flex; width: 80%; flex-wrap: wrap;">
            <h6 class="footer_h6">首页</h6>
            <h6 class="footer_h6">百年品牌</h6>
            <h6 class="footer_h6">品牌实力</h6>
            <h6 class="footer_h6">特许合作</h6>
            <h6 class="footer_h6">传奇菜品</h6>
            <h6 class="footer_h6">门店导航</h6>
            <h6 class="footer_h6">联系我们</h6>
            <div style="width: 100%;padding-left: 3%;">
              <span class="footer_span">友情链接： 火锅加盟 美兆品牌 辣斗辣火锅</span><br>
              <span class="footer_span"> 蜀ICP备123456789号 网站建设：瑞成火锅</span><br>
              <span class="footer_span">风险提示：投资有风险，请理性选择</span>
            </div>
          </div>
          <div>
            <img src="../img/erweima.jpg" width="150px" alt="">
          </div>
        </div>
      </div>
    </footer>
  </div>
</body>
<script>
  // 当页面刚加载完时调用
  window.onload = function () {

    var marqueeBox = document.getElementById("marquee-box");
    var marquee = document.getElementById("marquee");
    var marqueeCopy = document.getElementById("marquee-1");

    marqueeCopy.innerHTML = marquee.innerHTML;
    function fun() {
      //从右向左
      if (marqueeBox.scrollLeft >= 800) {
        marqueeBox.scrollLeft = 0;
      } else {
        marqueeBox.scrollLeft++;
      }
      //从左向右
      // if (marqueeBox.scrollLeft >= 0) {
      //   marqueeBox.scrollLeft = 800;
      // } else {
      //   marqueeBox.scrollLeft -- ;
      // }
    }

    var fun1 = setInterval(fun, 50);

    marqueeBox.onmouseover = function () {
      //鼠标经过时  清除定时器  停止图片的滚动
      clearInterval(fun1);
    };
    marqueeBox.onmouseout = function () {
      //鼠标离开后  继续滚动图片
      fun1 = setInterval(fun, 50);
    };


    if (localStorage.getItem("userId")) {
      // 说明已经登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "none";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'block';
    } else {
      //没有登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "block";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'none';
    }
  }

  // -----------------
  let btnThisList = document.querySelector('.home_div_h3_p');
  let img_b = document.querySelector('.h_div_img');
  //鼠标移入
  btnThisList.addEventListener('mouseover', function (event) {
    img_b.style.display = 'block';
  })
  //鼠标移出
  btnThisList.addEventListener('mouseout', function (event) {
    img_b.style.display = 'none';
  })
  let btnThisList1 = document.querySelector('.home_div_h3_p1');
  let img_b1 = document.querySelector('.h_div_img1');
  //鼠标移入
  btnThisList1.addEventListener('mouseover', function (event) {
    img_b1.style.display = 'block';
  })
  //鼠标移出
  btnThisList1.addEventListener('mouseout', function (event) {
    img_b1.style.display = 'none';
  })
  let btnThisList2 = document.querySelector('.home_div_h3_p2');
  let img_b2 = document.querySelector('.h_div_img2');
  //鼠标移入
  btnThisList2.addEventListener('mouseover', function (event) {
    img_b2.style.display = 'block';
  })
  //鼠标移出
  btnThisList2.addEventListener('mouseout', function (event) {
    img_b2.style.display = 'none';
  })
  let btnThisList3 = document.querySelector('.home_div_h3_p3');
  let img_b3 = document.querySelector('.h_div_img3');
  //鼠标移入
  btnThisList3.addEventListener('mouseover', function (event) {
    img_b3.style.display = 'block';
  })
  //鼠标移出
  btnThisList3.addEventListener('mouseout', function (event) {
    img_b3.style.display = 'none';
  })


  // ---------
  const inter1 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.home_div_img', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  inter1.observe(document.querySelector('.home_header_sec'))

  const inter2 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.home_div_h3_p', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_div_h3_p1', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_div_h3_p2', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_div_h3_p3', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  inter2.observe(document.querySelector('.home_one_sec'))

  const inter3 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.home_two_sec_div1', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_two_sec_div2', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_two_sec_div3', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_two_sec_div4', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  inter3.observe(document.querySelector('.home_two_sec'))

  const inter4 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.home_three_sec_div1', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_three_sec_div2', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_three_sec_div3', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_three_sec_div4', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  inter4.observe(document.querySelector('.home_three_sec'))

  const inter5 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.home_five_sec_div', { duration: 1, opacity: 0 })
    t1.from('.home_five_sec_div1', { duration: 1, opacity: 0 })
    t1.from('.home_five_sec_div2', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_five_sec_div3', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  inter5.observe(document.querySelector('.home_five_sec'))
</script>
<script>
  function search() {
    const name = document.getElementById("name").value;
    localStorage.setItem("name", name);
    window.location.href = './shop.html'
  }
</script>

</html>